<template>
  <div class="app-container">
    <el-card shadow="hover">
      <div slot="header" class="clearfix">
        <span style="font-weight: bold">进厂检测信息</span>
        <div style="float:right;">
          <el-button @click="addWorkOrder" v-show="add" size="mini" type="primary">保存</el-button>
          <el-button size="mini" @click="goBack">返回</el-button>
        </div>
      </div>
      <el-row>
        <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="68px">
          <el-form-item label="车牌号" prop="plateNo">
            <el-input
              v-model="queryParams.plateNo"
              placeholder="请输入车牌号"
              clearable
              size="small"
              :readonly="submitForm.readonly"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" :disabled="submitForm.disable"  size="mini" @click="handleQuery">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-divider content-position="center"><i class="el-icon-edit"/>车辆数据</el-divider>
      <el-row>
        <el-form label-position="top" ref="vehicleForm" :model="vehicleForm"  :rules="formRules" label-width="80px">
          <el-row gutter="20">
            <el-col :span="8">
              <el-form-item label="营运证号" prop="businessLicenseNumber">
                <el-input v-model="vehicleForm.businessLicenseNumber" placeholder="请输入营运证号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车架号" prop="vin">
                <el-input v-model="vehicleForm.vin" placeholder="请输入车架号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车辆类型" prop="vehicleType">
                <el-input placeholder="请输入车辆类型" v-model="vehicleForm.vehicleType"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="20">
            <el-col :span="8">
              <el-form-item label="燃料类型" prop="fuelType">
                <el-select style="width: 100%" v-model="vehicleForm.fuelType" placeholder="请选择燃料类型">
                  <el-option
                    v-for="dict in dict.type.fuel_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车牌颜色" prop="plateColor">
                <el-input v-model="vehicleForm.plateColor" placeholder="请输入车牌颜色" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="20">
            <el-col :span="8">
              <el-form-item label="整备质量" prop="curbWeight">
                <el-input v-model="vehicleForm.curbWeight" placeholder="请输入整备质量" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核定载人数" prop="approvedPassengerCapacity">
                <el-input v-model="vehicleForm.approvedPassengerCapacity" placeholder="请输入核定载人数" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发动机号" prop="engineNumber">
                <el-input v-model="vehicleForm.engineNumber" placeholder="请输入发动机号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="20">
            <el-col :span="8">
              <el-form-item label="初次注册日期" prop="firstRegistrationDate">
                <el-date-picker style="width: 100%" clearable
                                v-model="vehicleForm.firstRegistrationDate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择初次注册日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="托修方" prop="txUnit">
                <el-input v-model="vehicleForm.txUnit" placeholder="请输入托修方" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="托修方电话" prop="txUnitPhone">
                <el-input v-model="vehicleForm.txUnitPhone" placeholder="请输入托修方电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="维护周期(月)" prop="maintenanceCycle">
                <el-input v-model="vehicleForm.maintenanceCycle" placeholder="请输入维护周期(月)" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="品牌型号" prop="brand">
                <el-input v-model="vehicleForm.brand" placeholder="请输入品牌型号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="营运性质" prop="operatingNature">
                <el-input v-model="vehicleForm.operatingNature" placeholder="请输入营运性质" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <el-divider content-position="center"><i class="el-icon-edit"/>进厂检验单</el-divider>
      <el-form label-position="top" :model="enteringFactoryForm" ref="enteringFactoryForm" :rules="formRules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="送修单位" prop="repairingUnit">
          <el-input v-model="enteringFactoryForm.repairingUnit" placeholder="请输入送修单位" />
        </el-form-item>
        <el-form-item label="承修单位" prop="undertakingUnit">
          <el-input v-model="enteringFactoryForm.undertakingUnit" placeholder="请输入承修单位" />
        </el-form-item>
        <el-form-item label="检验员" prop="inspector">
          <el-input v-model="enteringFactoryForm.inspector" placeholder="请输入检验员" />
        </el-form-item>
        <el-form-item label="车辆档案及车主反映车辆情况" prop="vehicleArchives">
          <el-input v-model="enteringFactoryForm.vehicleArchives" placeholder="请输入车辆档案及车主反映车辆情况" />
        </el-form-item>
        <el-form-item label="项目" prop="name">
          <el-table
            :data="enteringFactoryTable"
            border
            style="width: 100%">
            <el-table-column type="index" label="序号"/>
            <el-table-column prop="itemName" label="项目名称"/>
            <el-table-column prop="itemDetail" label="检查情况(是O       否X)"/>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-select clearable v-model="scope.row.itemValue" placeholder="请选择是  否">
                  <el-option
                    v-for="dict in dict.type.factory_item_value"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="附加作业项目" prop="additionalItems">
          <el-input v-model="enteringFactoryForm.additionalItems" placeholder="请输入附加作业项目" />
        </el-form-item>
        <el-form-item label="车主意见" prop="ownerOpinion">
          <el-input v-model="enteringFactoryForm.ownerOpinion" placeholder="请输入车主意见" />
        </el-form-item>
      </el-form>
      <el-divider content-position="center"><i class="el-icon-edit"/>机动车维修合同</el-divider>
      <el-form label-position="top" :model="contractForm" :rules="formRules" ref="contractForm" label-width="100px" class="demo-ruleForm">
         <el-form-item label="承修单位" prop="undertakingUnit">
          <el-input v-model="contractForm.undertakingUnit" placeholder="请输入承修单位" />
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="托修人单位" prop="txUnit">
          <el-input v-model="contractForm.txUnit" placeholder="请输入托修单位" />
        </el-form-item>
          </el-col>
           <el-col :span="12">
              <el-form-item label="托修人单位电话" prop="txUnitPhone">
                <el-input v-model="contractForm.txUnitPhone" placeholder="请输入托修单位电话" />
              </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="发动机型号" prop="engineModel">
              <el-input v-model="contractForm.engineModel" placeholder="请输入发动机型号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发动机号" prop="engineNum">
              <el-input v-model="contractForm.engineNum" placeholder="请输入发动机号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行驶时程" prop="drivingDuration">
              <el-input v-model="contractForm.drivingDuration" placeholder="请输入行驶时程" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="按标准装备缺损记录" prop="defectRecord">
              <el-input v-model="contractForm.defectRecord" placeholder="按标准装备缺损记录" ></el-input>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="车主财产" prop="ownerProperty">
              <el-input v-model="contractForm.nameownerProperty" placeholder="车主财产"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="车主要求" prop="ownerRequest">
          <el-input v-model="contractForm.ownerRequest" placeholder="车主要求" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="确认维修项目" prop="enterItemList">
          <el-select style="width:100%" placeholder="确认维修项目" v-model="contractForm.enterItemList">
            <el-option value="" label=""></el-option>
          </el-select>
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="材料费加价率(%)" prop="costMarkupRate">
              <el-input placeholder="材料费加价率" v-model="contractForm.costMarkupRate" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材料费管理费" prop="feeManagementFee">
              <el-input placeholder="材料费管理费" v-model="contractForm.feeManagementFee" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="维修追加项目" prop="appendItem">
              <el-input placeholder="维修追加项目" v-model="contractForm.appendItem" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="维修追加项目确认" prop="appendItemEnter">
              <el-input placeholder="维修追加项目确认" v-model="contractForm.appendItemEnter" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="约定出厂日期" prop="agreedManufacturingDate">
              <el-date-picker clearable
                v-model="form.agreedManufacturingDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择约定出厂日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="质量验收方式" prop="qualityAcceptanceMethod">
              <el-input v-model="contractForm.qualityAcceptanceMethod" placeholder="质量验收方式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="质量保证期" prop="qualityAssurancePeriod">
              <el-input v-model="contractForm.qualityAssurancePeriod" placeholder="质量保证期"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="质量保证期为车辆行驶公里" prop="qualityAssuranceKm">
              <el-input v-model="contractForm.qualityAssuranceKm" placeholder="质量保证期为车辆行驶公里"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="或质量保证天" prop="qualityAssuranceDay">
              <el-input v-model="contractForm.qualityAssuranceDay" placeholder="或质量保证天"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="付款方式及时间" prop="payMethodImmediately">
              <el-radio-group v-model="form.payMethodImmediately">
                <el-radio label="修竣即付"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预付(%)" prop="prepaid">
              <el-input v-model="contractForm.prepaid" placeholder="预付(%)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="约定日期付款" prop="payAgreedDate">
              <el-date-picker clearable
                v-model="form.payAgreedDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择约定日期付款">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="其他付款方式" prop="payOther">
              <el-input v-model="form.payOther" placeholder="请输入其他付款方式" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="双方约定及其备注" prop="remark">
          <el-input v-model="contractForm.remark" type="textarea" placeholder="双方约定及其备注"></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="center"><i class="el-icon-edit"/>维修项目</el-divider>
      <el-row>
        <el-col :span="24">
          <el-table
            border
            :data="repairItemTableList"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="itemName"
              label="维修项目名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="address"
              label="工时"
              align="center">
              <template slot-scope="scope">
                <el-input :readonly="submitForm.readonly"  @blur="calculate(scope.row)" v-model="scope.row.workingHour"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="单价（元）"
              align="center">
              <template slot-scope="scope">
                <el-input :readonly="submitForm.readonly" @blur="calculate(scope.row)" v-model="scope.row.orderPrice"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="totalPrice"
              label="小计金额(元)"
              align="center">
            </el-table-column>
            <el-table-column label="操作"  fixed="right" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button  type="danger" icon="el-icon-delete" :disabled="submitForm.disable" @click="removeRepairItem(scope.row.id)" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="selectRepairItem" class="select_items" :disabled="submitForm.disable" type="primary" icon="el-icon-check">选择项目</el-button>
        </el-col>
      </el-row>
      <el-divider content-position="center"><i class="el-icon-edit"/>维修配件</el-divider>
      <el-row>
        <el-col :span="24">
          <el-table
            border
            :data="AccessoriesTableList"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="accessoryName"
              label="配件名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="brandName"
              label="品牌"
              align="center">
              <template slot-scope="scope">
                <el-input :readonly="submitForm.readonly" v-model="scope.row.brandName"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="accessoryModel"
              label="配件型号"
              align="center">
              <template slot-scope="scope">
                <el-input :readonly="submitForm.readonly" v-model="scope.row.accessoryModel"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="accessoriesNumber"
              label="配件编号"
              align="center">
              <template slot-scope="scope">
                <el-input :readonly="submitForm.readonly" v-model="scope.row.accessoriesNumber"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="price"
              label="单价（元）"
              align="center">
              <template slot-scope="scope">
                <el-input :readonly="submitForm.readonly"  min="1" @blur="saveAccessoriesNumber(scope.row)" v-model="scope.row.price"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="accessoriesCount"
              label="数量"
              align="center">
              <template slot-scope="scope">
                <el-input :readonly="submitForm.readonly" type="number" min="1" @blur="saveAccessoriesNumber(scope.row)" v-model="scope.row.accessoriesCount"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="totalPrice"
              label="小计金额(元)"
              align="center">
            </el-table-column>
            <el-table-column label="操作"  fixed="right" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button  type="danger" :disabled="submitForm.disable" icon="el-icon-delete" @click="removeAccessories(scope.row.id)" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button class="select_items" :disabled="submitForm.disable" @click="openAccessriesDialog" type="primary" icon="el-icon-plus">添加配件</el-button>
        </el-col>
      </el-row>
      <el-divider content-position="center"><i class="el-icon-picture-outline"/>照片数据</el-divider>
      <el-row>
        <el-form label-position="top" ref="form" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item required label="进厂照片">
                <image-upload></image-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item required label="维修过程照片">
                <image-upload></image-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item required label="竣工检验单照片">
                <image-upload></image-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item required label="出厂结算清单">
                <image-upload></image-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item required label="合格证">
                <image-upload></image-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </el-card>



    <!--维修项目 对话框-->
    <el-dialog
      :title="title"
      :visible.sync="repairDialogVisible"
      width="800px"
      append-to-body>
      <el-select @remove-tag="removeItem" style="width: 100%;" multiple  v-model="repairValue" filterable placeholder="请选择">
        <el-option
          v-for="item in repairItems"
          :key="item.id"
          :label="item.itemName"
          :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="repairDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRepairTable">确 定</el-button>
      </span>
    </el-dialog>

    <!--配件 对话框-->
    <el-dialog
      :title="title"
      :visible.sync="peJianDialogVisible"
      width="800px"
      append-to-body>
      <el-select @remove-tag="cleanAccess" style="width: 100%;" multiple  v-model="peiJianValue" filterable placeholder="请选择">
        <el-option
          v-for="item in allAccessories"
          :key="item.id"
          :label="item.accessoryName"
          :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="peJianDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAccesseriesTable">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
import {updateWorkorder, addWorkorder, removeAccessories, saveAccessoriesNumber, getSelectedAccessriesItem, queryCheckResult, queryRepairProject, totalPrice, orderDet, endSubmitOrder, getSelectedRepairItem,calculateRepairItem, removeItem, getRepairItemList,allAccessories } from "@/api/order/workorder";
export default {
  name: "addWorkOrder",
  dicts: ['fuel_type','factory_item_value'],
  data() {
    return {
      vehicleForm: {},
      formRules: {
        undertakingUnit: [
          { required: true, message: "承修单位不能为空", trigger: "blur" }
        ],
        txUnit: [
          { required: true, message: "托修人单位不能为空", trigger: "blur" }
        ],
        txUnitPhone: [
          { required: true, message: "托修人单位电话不能为空", trigger: "blur" }
        ],
        engineModel: [
          { required: true, message: "发动机型号不能为空", trigger: "blur" }
        ],
        engineNum: [
          { required: true, message: "发动机号不能为空", trigger: "blur" }
        ],
        inspector: [
          { required: true, message: "检验员不能为空", trigger: "blur" }
        ],
        drivingDuration: [
          { required: true, message: "行驶时程不能为空", trigger: "blur" }
        ],
        repairingUnit: [
          { required: true, message: "送修单位不能为空", trigger: "blur" }
        ],
        businessLicenseNumber: [
          { required: true, message: "营运证号不能为空", trigger: "blur" }
        ],
        plateNo: [
          { required: true, message: "车牌号不能为空", trigger: "blur" }
        ],
        vin: [
          { required: true, message: "车架号不能为空", trigger: "blur" }
        ],
        vehicleType: [
          { required: true, message: "车辆类型不能为空", trigger: "change" }
        ],
        fuelType: [
          { required: true, message: "燃料类型不能为空", trigger: "change" }
        ],
        plateColor: [
          { required: true, message: "车牌颜色不能为空", trigger: "blur" }
        ],
        curbWeight: [
          { required: true, message: "整备质量不能为空", trigger: "blur" }
        ],
        approvedPassengerCapacity: [
          { required: true, message: "核定载人数不能为空", trigger: "blur" }
        ],
        engineNumber: [
          { required: true, message: "发动机号不能为空", trigger: "blur" }
        ],
        firstRegistrationDate: [
          { required: true, message: "初次注册日期不能为空", trigger: "blur" }
        ],
        txUnit: [
          { required: true, message: "托修方不能为空", trigger: "blur" }
        ],
        txUnitPhone: [
          { required: true, message: "托修方电话不能为空", trigger: "blur" }
        ],
        maintenanceCycle: [
          { required: true, message: "维护周期(月)不能为空", trigger: "blur" }
        ],
        brand: [
          { required: true, message: "品牌型号不能为空", trigger: "blur" }
        ],
        operatingNature: [
          { required: true, message: "营运性质不能为空", trigger: "blur" }
        ],
      },
      contractForm: {},
      enteringFactoryTable: [{
        id: 1,
        itemName: "车载诊断系统（OBD）",
        itemDetail: "车载诊断系统（OBD）无故障信息。",
        itemValue: null,
      },{
        id: 2,
        itemName: "发动机工作状况",
        itemDetail: "启动性能良好。",
        itemValue: null,
      },{
        id: 3,
        itemName: "发动机工作状况",
        itemDetail: "发动机停机装置功能有效。",
        itemValue: null,
      },{
        id: 4,
        itemName: "发动机工作状况",
        itemDetail: "低、中、高速运转稳定，无异响。  ",
        itemValue: null,
      },{
        id: 5,
        itemName: "转向器和转向传动机构工作状况",
        itemDetail: "转向轻便、灵活。",
        itemValue: null,
      },{
        id: 6,
        itemName: "转向器和转向传动机构工作状况",
        itemDetail: "无卡滞、异响现象。",
        itemValue: null,
      },{
        id: 7,
        itemName: "转向器和转向传动机构工作状况",
        itemDetail: "锁止、限位功能正常。",
        itemValue: null,
      },{
        id: 8,
        itemName: "离合器工作状况",
        itemDetail: "结合平稳，分离彻底。",
        itemValue: null,
      },{
        id: 9,
        itemName: "离合器工作状况",
        itemDetail: "操作轻便，无异响、打滑、抖动及沉重等现象。",
        itemValue: null,
      },{
        id: 10,
        itemName: "变速器工作状况",
        itemDetail: "操作轻便、档位准确，无异响、打滑及乱档等异常现象。",
        itemValue: null,
      },{
        id: 11,
        itemName: "主减速器、差速器、传动轴工作状况",
        itemDetail: "主减速器、差速器、传动轴工作无异响。",
        itemValue: null,
      },{
        id: 12,
        itemName: "主减速器、差速器、传动轴工作无异响。",
        itemDetail: "符合GB7258规定。",
        itemValue: null,
      },{
        id: 13,
        itemName: "排气污染物",
        itemDetail: "符合GB3847或GB18285规定。",
        itemValue: null,
      }],
      spanArr: [],
      enteringFactoryForm: {},
      form:{},
      active: 0,
      add: true,
      emptyRepairItemArr: true,
      emptyPeiJianArr: true,
      printOpen: false,
      checkResult:{},
      submitForm:{
        readonly: false,
        disable: false,
        show: false,
        print: false
      },
      //行驶里程
      drivenDistance: "",
      desc:"至少上传一张照片最多上传五张照片",
      //维修工单form
      orderForm:{
        id: null,
        imageUrl:  '',
        price: null,
        checkResultNumber: '',
        workOrderNumber: "",
        repairList: null,
        accessoryList: null,
        drivenDistance: null,
        faultDescription: null,
        newImageUrlList: [],
        illustrate: null,
        amountTo: null
      },
      //合计金额
      orderTotalPrice: null,
      //配件列表
      allAccessories: [],
      //维修项目
      repairItems: [],
      repairValue: '',
      //配件值
      peiJianValue: '',
      title: '',
      //维修项目对话框
      repairDialogVisible: false,
      //配件项目对话框
      peJianDialogVisible: false,
      //现场图片
      onSiteImages: '',
      //检验结果列表
      checkResultData: [],
      //维修项目数据列表
      repairItemTableList: [],
      //配件数据列表
      AccessoriesTableList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        plateNo: '',
      },
      // 要展开的行，数值的元素是row的key值
      expands: [],
      getRowKeys(row) {
        return row.id
      },
    };
  },
  created() {
    if (this.$route.query.id){
      this.orderForm.id = this.$route.query.id;
      this.orderDet();
    }
    if (this.$route.query.type && this.$route.query.type === 'submit' && this.$route.query.id){
      this.orderForm.id = this.$route.query.id;
      this.orderDet();
      this.setSubmitForm();
    }
    if (this.$route.query.type && this.$route.query.type === 'print' && this.$route.query.id){
      this.orderForm.id = this.$route.query.id;
      this.orderDet();
      this.setPrintForm();
    }
    if (this.$route.query.type && this.$route.query.type === 'det' && this.$route.query.add === 'det'  && this.$route.query.id){
      this.orderForm.id = this.$route.query.id;
      this.orderDet();
      this.setDetForm();
    }
  },
  mounted() {
    // 在这里你想初始化的时候展开哪一行都可以了
    if (this.checkResultData[0]) {
      this.expands.push(this.checkResultData[0].id);
    }
  },
  computed:{
    total(){
      let total = 0;
      if (this.repairItemTableList){
        this.repairItemTableList.forEach((item) => {
          if (item.totalPrice) {
            total += item.totalPrice;
          }
        });
      }
     if (this.AccessoriesTableList){
       this.AccessoriesTableList.forEach(item => {
         if (item.totalPrice) {
           total += item.totalPrice;
         }
       });
     }
     this.orderForm.price = total;
      return total;
    }
  },
  methods: {
    cancel(){
      this.printOpen = false;
    },
    openPrint(){
      this.checkResult = this.checkResultData[0];
      this.printOpen = true;

    },
    submitOrderForm(){
      //维修工单提交
      // endSubmitOrder(this.orderForm.id).then(res => {
      //   this.$router.go(-1);
      // })

      endSubmitOrder(this.orderForm.id).then(res => {
        this.$message.info(res.msg)
        this.$router.go(-1);
      })
    },
    setSubmitForm(){
      this.submitForm.readonly = true;
      this.submitForm.disable = true;
      this.submitForm.show = true;
    },
    setPrintForm(){
      this.submitForm.readonly = true;
      this.submitForm.disable = true;
      this.submitForm.print = true;
    },
    setDetForm(){
      this.submitForm.readonly = true;
      this.submitForm.disable = true;
      this.add = false
    },
    orderDet(){
      orderDet(this.orderForm.id).then(res => {
        this.checkResultData = res.data.list;
        if (this.checkResultData[0]) {
          this.checkResult = this.checkResultData[0];
        }
        this.repairItemTableList = res.data.repairTableData;
        this.AccessoriesTableList = res.data.accessoriesTableData;
        if (this.AccessoriesTableList){
          this.emptyPeiJianArr = false;
        }
        if (this.repairItemTableList){
          this.emptyRepairItemArr = false;
        }
        this.repairValue = res.data.repairIdList;
        this.peiJianValue = res.data.accessoriesIdList;
        this.orderForm.newImageUrlList = res.data.newImageUrl;
        this.orderForm.imageUrl = res.data.imageUrl;
        this.orderForm.drivenDistance = res.data.drivenDistance;
        this.orderForm.illustrate = res.data.illustrate;
        this.orderForm.amountTo = res.data.amountTo;
        this.orderForm.faultDescription = res.data.faultDescription;
        this.queryParams.plateNo = res.data.list[0].vehicleBrand;
      })
    },
    goBack(){
      this.$router.go(-1);
    },
    reset(){
      this.orderForm = {};
      this.queryParams = {};
      this.checkResultData = [];
    },
    /** 保存维修工单 **/
    addWorkOrder(){
      this.active ++;
      // if (this.checkResultData[0]) {
      //   this.orderForm.checkResultNumber = this.checkResultData[0].vehicleReportnum;
      //   this.orderForm.plateNo = this.checkResultData[0].vehicleBrand;
      // }
      // if (this.repairItemTableList){
      //   this.orderForm.repairList = this.repairItemTableList;
      // }
      // if (this.AccessoriesTableList){
      //   this.orderForm.accessoryList = this.AccessoriesTableList;
      // }
      // if (this.orderForm.id){
      //   updateWorkorder(this.orderForm).then(res => {
      //     this.$router.go(-1);
      //   })
      // } else {
      //   addWorkorder(this.orderForm).then(res => {
      //     this.$router.go(-1);
      //   })
      // }

    },
    //打开添加配件对话框
    openAccessriesDialog(){
      allAccessories().then(res => {
        this.allAccessories = res.data;
        this.peJianDialogVisible = true;
        this.title = "选择配件";
      })
    },
    getList(){
      getRepairItemList().then(res => {
        this.repairItemTableList = res.data.repairItemList;
        this.AccessoriesTableList = res.data.accessriesList;
        this.repairValue = res.data.idList;
        this.peiJianValue = res.data.accessriesIdList;
      })
    },
    //移除维修项目
    removeItem(e){
      this.removeRepairItem(e);
    },
    //维修项目小计
    calculate(row){
      calculateRepairItem(JSON.stringify(row)).then(res => {
        this.repairItemTableList.forEach((item,index) => {
          if (item.id === row.id){
            this.repairItemTableList.splice(index,1,res.data);
          }
        })
      })
    },
    //配件小计
    saveAccessoriesNumber(row){
      saveAccessoriesNumber(JSON.stringify(row)).then(res => {

        this.AccessoriesTableList.forEach((item,index) => {
          if (item.id === row.id){
            this.AccessoriesTableList.splice(index,1,res.data);
          }
        })
      })
    },
    //保存维修表
    saveRepairTable(){
      let param = {};
      param.itemIds = this.repairValue;
      param.repairItemList = this.repairItemTableList;
      getSelectedRepairItem(JSON.stringify(param)).then(res => {
        this.repairItemTableList = res.data;
        this.resetValueRepairDialog();
      });
    },
    //保存配件表
    saveAccesseriesTable(){
      let param = {};
      param.itemIds = this.peiJianValue;
      param.accessoryList = this.AccessoriesTableList;
      getSelectedAccessriesItem(JSON.stringify(param)).then(res => {
        this.AccessoriesTableList = res.data;
        this.peJianDialogVisible = false;
      });
    },
    //选择维修项目
    selectRepairItem(){
      queryRepairProject().then(res => {
        this.repairItems = res.data;
        this.repairDialogVisible = true;
        this.title = "选择维修项目";
      });
    },
    /** 搜索按钮操作 */
    handleQuery(){
      if(this.queryParams.plateNo){
        queryCheckResult(this.queryParams.plateNo).then(res => {
          this.vehicleForm = res.data;
        })
      }
    },
    /** 重置按钮操作 */
    resetValueRepairDialog() {
      this.repairDialogVisible = false;
    },
    /** 删除维修项目 **/
    removeRepairItem(row) {
      this.repairItemTableList.forEach((item,index) => {
        if (item.id === row){
          this.repairItemTableList.splice(index,1);
        }
      });
      this.repairValue.forEach((item,index) => {
        if (item === row){
          this.repairValue.splice(index,1);
        }
      })
    },
    //删除配件
    removeAccessories(row){
      this.AccessoriesTableList.forEach((item,index) => {
        if (item.id === row){
          this.AccessoriesTableList.splice(index,1);
        }
      });
      this.peiJianValue.forEach((item,index) => {
        if (item === row){
          this.peiJianValue.splice(index,1);
        }
      })
    },
    //dialog删除配件
    cleanAccess(e){
      this.removeAccessories(e);
    }
  }
};
</script>

<style media="print">
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 150px;
    color: #99a9bf;
    margin-left: 50px;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .select_items {
    border-radius: 30px;
    margin-left: 45%;
    margin-top: 30px;
  }

  .totalPrice {
    height: 30px;
    margin: 15px 0;
    border-bottom: 1px solid #DCDFE6;
  }

  .total_price_one {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
  }

  .total_price_two {
    color: red;
  }

  .total_price_three {
    font-size: 12px;
    color: #909399;
  }


  /*查看维修工单表格样式*/
  .order_div{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
  }
  .order_div h3 {
    padding: 15px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: bold;
  }
  .order_div table {
    /*width: 750px;*/
    width: 900px; /*横向*/
    height: 800px;
    border-collapse: collapse;
    border: 1px solid #000000;
    text-align: center;
  }
  .order_div table td {
    border: 1px solid #000000;
    padding: 0 3px;
  }

  .check-result-table td{
    padding: 5px;
    border-left:1px solid #2b2f3a;
    border-top:1px solid #2b2f3a;
  }

  .check_result_table {
    width: 100%;
  }

  .check_result_table table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #000000;
    text-align: center;
  }
  .check_result_table table td {
    border: 1px solid #000000;
    padding: 0 3px;
  }
  @page {
    size:  auto;
    margin: 3mm;
  }
</style>
